<template>
	<view class="page-index" style="background: #1a2a7e;min-height: 100vh;">
		<!-- <u-navbar title-color="#fff" title=" " :background="background" :border-bottom="false" :is-back="false">
			<view class="u-flex u-f1 pl12 pr12 u-f-jsb">
				<view class="search-select u-flex mr10 u-f-jsb">
					无锡市
					<u-icon class="fz12" name="arrow-down" color="#666"></u-icon>
				</view>
				<view class="u-f1">
					<u-search placeholder="请输入诊所名称搜索" :show-action="false" :action-style="{'color':'#fff'}" :input-style="{'width':'50px',padding:0}"
						 @click="toSearch"></u-search>
				</view>

			</view>
		</u-navbar> -->
		
		
		
		<view class="">
			<swiper class="swiper" style="height:500rpx" circular @change="bannerChange">
				<swiper-item @click="toBanner(item)" v-for="(item,index) in 3" :key="index">
					<image src="/static/images/banner1.png" style="width: 100%;height:500rpx;display: block;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="pl12 pr12" style="position: relative;top: -70rpx;">
			
			
			<view class="brs8 p15 pt10 pb10 bg-white bg-shaw">
				<view class="u-f-item u-f-jsb" v-if="!isLogin" @click="toPage('/pages/user/setting/info')">
					<view class="u-f-item">
						<u-avatar size="100" :src="userInfo.avatar"></u-avatar>
						<view class="pl8">
							<view class="fz16 u-font-bold">微信会员</view>
				
				
							<view class="mt5 u-f-item">
								<view class="fz12 c9">开启尊享权益</view>
							</view>
						</view>
					</view>
					<view class="u-flex">
						<u-icon class="fz16" name="arrow-right" color="#666"></u-icon>
					</view>
				</view>
				<view class="u-f-item u-f-jsb" v-else @click="toLogin">
					<view class="u-f-item">
						<u-avatar size="100"></u-avatar>
						<view class="u-p-l-20">
							<view class="fz16">登录/注册</view>
							<view class="mt5 u-f-item">
								<view class="fz12">欢迎来到您的360°视健康管理中心</view>
							</view>
						</view>
						
					</view>
					<u-icon name="arrow-right" color="#D9D9D9"></u-icon>
				</view>
			</view>
			
			
			<view class="brs8 p12 bg-white bg-shaw u-flex u-f-jsb mt12 pl20 pr20" style="text-align: center;">
				<view class="">
					<image src="/static/images/ic-fu.png" style="width: 80rpx;height: 80rpx;"></image>
					<view class="fz12 mt3">福利领用</view>
					<view class="c9 mt2" style="font-size: 20rpx;">折扣、现金、赠品</view>
				</view>
				<view class="">
					<image src="/static/images/ic-2.png" style="width: 80rpx;height: 80rpx;"></image>
					<view class="fz12 mt3">会员商城</view>
					<view class="c9 mt2" style="font-size: 20rpx;">会员礼品换购</view>
				</view>
				<view class="">
					<image src="/static/images/yy1.png" style="width:80rpx;height: 80rpx;"></image>
					<view class="fz12 mt3">预约</view>
					<view class="c9 mt2" style="font-size: 20rpx;">门诊医生预约</view>
				</view>
			</view>
			<view class="brs8 bg-white bg-shaw u-flex u-f-jsb mt12" style="text-align: center;flex-wrap: wrap;">
				<view class="p15" style="width: 50%;border-bottom: 1px solid #f5f5f5;border-right: 1px solid #f5f5f5">
					<image src="/static/images/ic-1.png" style="width: 70rpx;height: 70rpx;"></image>
					<view class="fz14 mt3 u-font-bold">线下门店</view>
					<!-- <view class="c9 mt2" style="font-size: 20rpx;">折扣、现金、赠品</view> -->
				</view>
				<view class="p15" style="width: 50%;border-bottom: 1px solid #f5f5f5;">
					<image src="/static/images/ic-2.png" style="width: 70rpx;height: 70rpx;"></image>
					<view class="fz14 mt3 u-font-bold">云商城</view>
				</view>
				<view class="p15" style="width: 50%;border-right: 1px solid #f5f5f5">
					<image src="/static/images/ic-4.png" style="width:70rpx;height: 70rpx;"></image>
					<view class="fz14 mt3 u-font-bold">合作渠道</view>
				</view>
				
				<view class="p15" style="width: 50%;">
					<image src="/static/images/ic-3.png" style="width: 70rpx;height: 70rpx;"></image>
					<view class="fz14 mt3 u-font-bold"> 牙科知识</view>
				</view>
			</view>
			
			<!-- <view class="mt12">
				<swiper class="swiper" style="height:240rpx" circular @change="bannerChange">
					<swiper-item @click="toBanner(item)" v-for="(item,index) in 3" :key="index">
						<image src="/static/images/banner1.png" style="width: 100%;height:240rpx;display: block;border-radius: 10rpx;"></image>
					</swiper-item>
				</swiper>
			</view> -->
		</view>
		
		


		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				isLogin:false,
				search: {},
				curArticle:1,
				noticeList: [],
				serviceImg: '',
				showVideo: false,
				showService: false,
				showTips: false,
				// 选择
				statusBarHeight: 20,
				curBanner: {},
				bannerHeight: 200,
				background: {
					background: '#1a2a7e'
				},
				userInfo: {},
				otherList: [],
				flowList: [],
				loadStatus: 'loadmore',
				page: 1,
				noticeListAll: [],
				actionList: [],
				bannerList: [],
			}
		},
		onShareAppMessage(e) {},
		onShareTimeline() {

		},
		onShow() {
			this.$api.articleInfo({
				id: 5
			}, res => {
				if (res.code == 200) {
					this.serviceImg = res.data.picUrl
				}
			})

			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 0) {
						this.userInfo = res.data;
					}
				})


			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				this.initData()


				this.$api.deptList({}, res => {
					if (res.code == 0) {
						if (!this.$db.get('deptId')) {

							this.$db.set('deptId', res.data[0].id)
							this.$db.set('deptIdName', res.data[0].name)
						}
					}
				})
				this.$api.noticePage({}, res => {
					if (res.code == 0) {
						this.noticeListAll = res.data.list
						this.noticeList = []
						res.data.list.some(item => {
							this.noticeList.push(item.title)
						})
					}
				})
				this.$api.adList({
					position: 1
				}, res => {
					if (res.code == 0) {
						this.bannerList = res.data;
						this.curBanner = res.data[0]
					}
				})

				this.$api.adList({
					position: 4
				}, res => {
					if (res.code == 0) {
						this.actionList = res.data;
					}
				})

				this.$api.adList({
					position: 5
				}, res => {
					if (res.code == 0) {
						this.otherList = res.data;
					}
				})

			})
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res, 123123)
					_this.statusBarHeight = res.statusBarHeight
					_this.bannerHeight = (res.windowHeight)
				}
			})
		},

		// 页面下拉到底部触发
		onReachBottom() {
			console.log(this.loadStatus, 11111)
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toAdd(){
				uni.navigateTo({
					url:'/pages/index/add'
				})
			},
			selectArt(idx){
				this.curArticle=idx
				this.initData()
			},
			toBanner(item) {
				console.log(item, 121221)
				if (item.videoUrl) {
					this.showVideo = true
					return
				}
				if (item.url && item.url.indexOf('http') >= 0) {
					uni.navigateTo({
						url: `/pages/webview/webview?src=${item.url}`
					})
				} else {
					console.log(item.url, 121221)
					uni.navigateTo({
						url: item.url
					})
				}
			},
			bannerChange(e) {

				console.log(e, 121)
				this.curBanner = this.bannerList[e.detail.current]
			},
			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			toNotice(e) {
				console.log(e, 12)
				let id = this.noticeListAll[e].id
				uni.navigateTo({
					url: '/pages/single/single?notice=1&id=' + id
				})
			},
			getData() {
				let post={
					pageNo: this.page,
					categoryId: '1926552782540308481',
					keyword: this.keyword,
					pageSize: 10,
				}
				if(this.curArticle==2){
					post.categoryId='1940363397950840833'
				}
				this.$api.articleList(post, res => {
					if (res.code == 0) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.act-img {
		width: 382rpx;
		height: 188rpx;
		display: block;
	}
	.search-select{
		background: #fff;
		border-radius: 50rpx;
		padding: 12rpx 18rpx;
		width: 150rpx;
	}
	page {}
	.page-content{
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		top: -30rpx;
	}
	.ic-play {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

	}

	.module-banner {
		height: 280rpx;


	}

	.module-activity {
	}

	// .index-act{
	// 	.act1{
	// 		height: 188rpx;
	// 		background:url('https://dl.nhbdic.com/admin-api/infra/file/18/get/image/bg-act1.png');
	// 		background-size: cover;
	// 	}
	// 	.act2{
	// 		height: 188rpx;
	// 		background:url('https://dl.nhbdic.com/admin-api/infra/file/18/get/image/bg-act.png');
	// 		background-size: cover;
	// 	}
	// }
	.bg-img-block{
		background: #1a2a7e;
		height: 500rpx;
	}
	.module-user{
		padding-bottom: 50rpx;
		background: #1a2a7e;
	}
	.btn-view{
		background: #1a2a7e;
		color: #fff;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		
	}
</style>